<template>
  <div>
    <Menu.SubMenu :key="props.item.id" @click.stop>
      <template #expandIcon>
        <down-outlined v-if="item.children" style="font-size: 12px" />
      </template>
      <template v-slot:title
        ><a-radio :value="props.item.id" @change="onRoom(props.item, $event)" />{{
          props.item.name
        }}</template
      >
      <Room
        v-for="(elem, key) of props.item.children"
        :key="key"
        :item="elem"
        :index="key"
        @onRoom="onRoom"
      />
    </Menu.SubMenu>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import { Menu } from 'ant-design-vue';
import Room from './index';

const props = defineProps({
  item: Object,
  index: Object
});
const emit = defineEmits(['onRoom', 'onClickDormitory']);
import { DownOutlined } from '@ant-design/icons-vue';
function onRoom(room, e) {
  emit('onRoom', room, e);
}

function onClickDormitory(room, index) {
  emit('onClickDormitory', room, index);
}
</script>

<style lang="less" scoped></style>
